<template>
  <div>
    <el-form class="detail-info" label-width="100px">
      <h5 style="font-weight: bold;">用户信息</h5>
      <el-row>
        <el-col :span="12" class="edit_password_wrapper">
          <el-form-item label="用户ID:">
            <span>{{ userInfo.user_id }}</span>
          </el-form-item>
          <div class="edit_password" >
            <el-button size="mini" type="primary" @click="editPassword(userInfo.user_id)">修改密码</el-button>
          </div>
        </el-col>
      <el-col :span="12">
          <el-form-item label="注册渠道:">
            <span>{{ userInfo.channel_id | translateToName(channelOptions, 'channel_id', 'name') }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="注册方式">
            <span >{{ userInfo.reg_types }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="注册账号:">
            <span >{{ userInfo.reg_account }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="注册时间:">
            <span>{{ userInfo.created_at }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="最近登录时间:">
            <span>{{ userInfo.last_login_at }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="PC版本号:">
            <span>{{ userInfo.version }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机版本号:">
            <span>{{ userInfo.app_version||'--' }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="注销时间:">
            <span>{{ userInfo.deleted_at }}</span>
          </el-form-item>
        </el-col>
      <el-col :span="12">
          <el-form-item label="冻结时间:">
            <span>{{ userInfo.freeze_time }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <h5 style="font-weight: bold;">交易统计</h5>
      <el-row>
        <el-col :span="24">
          <el-form-item label="是否会员:">
            <el-tag :type="userInfo.is_member? 'success' : 'danger'" disable-transitions>{{ userInfo.is_member ? '是' : '否' }}</el-tag>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="最近消费时间:">
            <span>{{ userInfo.last_charge_at }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="首次消费时间:" label-width="150px">
            <span>{{ userInfo.first_charge_at }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="订单总数:">
            <span>{{ userInfo.total_member_times }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="消费总金额:">
            <span>{{ userInfo.total_pay_money | formatMoney}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="剩余使用天数:">
            <span v-for="item in userInfo.buy_relation_app_id" :key="item.app_id">{{ item.name }}({{ item.expire_at|leftDays }}天)；</span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="使用截止时间:">
            <span v-for="item in userInfo.buy_relation_app_id" :key="item.app_id">{{ item.name }}({{ item.expire_at|parseTime('{y}-{m}-{d} {h}:{i}') }})；</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <EditPassword :visible.sync="editPasswordVisible" :account="editPasswordAccount"/>
  </div>

</template>

<script>
import { mapGetters } from 'vuex'
import EditPassword from '@/components/edit-password'
export default {
  name: 'UserDetail',
  components: { EditPassword },
  props: {
    userInfo: {
      type: Object,
      require: true
    },
    channelOptions: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      editPasswordVisible: false,
      editPasswordAccount: ''
    }
  },
  computed: {
    ...mapGetters('zcsd-core', ['permission_projectList'])
  },
  methods: {

    editPassword (account) {
      console.log('edit password')
      this.editPasswordVisible = true
      this.editPasswordAccount = account
    }
  },
  filters: {
    loginType (val) {
      const obj = {
        'wx': '微信',
        'phone': '手机号'
      }
      return obj[val] || val
    },
    leftDays (day) {
      const nowTime = new Date().getTime()
      const expireTime = new Date(day).getTime()
      if (expireTime < nowTime) return 0
      return Math.ceil((expireTime - nowTime) / (1000 * 60 * 60 * 24))
    }
  }
}

</script>
<style lang="scss" scoped>
  h5{
      line-height: 30px;
      font-size: 16px;
  }
  .edit_password_wrapper{
    position: relative;
    .edit_password{
      position: absolute;
      top:5px;
      right:10px;
    }
  }

</style>
